<!--
 * @Date: 2022-04-14 12:30:12
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-22 11:11:23
 * @FilePath: \weibovue\src\components\asideList\index.vue
 * @Description: 侧边栏
-->
<template>
  <div>
    <el-menu
      style="height: 100vh; border-radius: 10px; border: none"
      :default-active="route.path"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      active-text-color="#ff8200"
      router
    >
      <li
        @click="isCollapse = !isCollapse"
        class="collapse"
        :class="isCollapse ? 'hand' : ''"
      >
        <i
          class="iconfont icon-toggle-right"
          :class="isCollapse ? '' : 'rotate'"
        ></i>
        <span class="text">收起</span>
      </li>
      <el-menu-item index="/weibohome">
        <i class="iconfont icon-home"></i>
        <span class="text">首页</span>
      </el-menu-item>
      <el-menu-item :index="`/weibohome/following/${userInfos.id}`">
        <i class="iconfont icon-wodeguanzhu"></i>
        <span class="text">我的关注</span>
      </el-menu-item>
      <el-menu-item :index="`/weibohome/fans/${userInfos.id}`">
        <i class="iconfont icon-fensi"></i>
        <span class="text">我的粉丝</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { UserData } from "../../api/types";
let isCollapse = ref<boolean>(false);
const route = useRoute();
const store = useStore();
const userInfos = computed<UserData>(() => store.state.userInfos);
</script>
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  overflow: hidden;
}
.rotate {
  transform: rotate(180deg);
}
.text {
  margin-left: 15px;
}
.collapse {
  display: flex;
  align-items: center;
  height: 56px;
  line-height: 56px;
  font-size: 14px;
  color: #303133;
  padding: 0 20px;
  list-style: none;
  cursor: pointer;
  position: relative;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
  white-space: nowrap;

  &:hover {
    background-color: #ecf5ff;
  }
}
.hand {
  span {
    display: none;
  }
}
</style>
